<template>
	<view class="" style="width: 100vw;height: 100vh">
		<hx-navbar title=" " :back="true" :fixed="true" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<!-- <image src="/static/login/login_bg.png" mode="scaleToFill" class="user_bg"></image> -->
			<view class="logo_box">
				<image v-if="ktheme == 'purple'" src="/static/login/logo.png" mode="scaleToFill"
					style="border-radius: 20rpx;" class="logo_box-img"></image>
				<image v-if="ktheme == 'black'" src="/static/login/logo-black.png" mode="scaleToFill"
					style="border-radius: 20rpx;" class="logo_box-img"></image>
			</view>
			<view class="titleWrap">
				<!-- <view class="color-o fsz64 logo_box-title">
				Hello！
			</view> -->
				<image v-if="ktheme == 'purple'" class="hello-img" src="/static/login/hello.png" mode="scaleToFill">
				</image>
				<image v-if="ktheme == 'black'" class="hello-img" src="/static/login/hello-black.png"
					mode="scaleToFill"></image>
				<view class="hello-title" :style="{'color':knormalColor}">请绑定手机号 </view>
			</view>
			<view class="input_box">
				<view class="input_boxx">
					<view class="input_panel">
						<input type="text" class="inputer" placeholder-class="inputer_placeholder" placeholder="请输入手机号码"
							v-model="mobile" :maxlength="maxMobile">
					</view>
				</view>
				<view class="input_boxx">
					<view class="input_panel">
						<input type="text" class="inputer" placeholder="请输入图形验证码" v-model="imageCaptcha"
							placeholder-class="inputer_placeholder">
						<view style="display: flex;justify-content: center;" @click="refreshImageCaptcha()">
							<img :src="imageCaptchaUrl" />
						</view>
					</view>
				</view>
				<view class="input_boxx">
					<view class="input_panel">
						<input type="text" class="inputer" placeholder="请输入验证码" v-model="code"
							placeholder-class="inputer_placeholder">
						<!-- @click="send_before" -->
						<view class="get_code" :style="{color:selectColorSize}" @click="sendCode" v-if="verification">
							获取验证码
						</view>
						<view class="get_codeing" v-else>{{ timer }} 秒后重新获取</view>
					</view>
				</view>
				<view class="login_btn" @click="login()" :style="{background:kbuttonBgColor}">绑定授权</view>
				<view class="agree_box" @tap="agree()">
					<radio :checked="is_agree" style="transform: scale(.6);" />
					<view :style="{'color':knormalColor}">我已同意金币世界<text :style="{color:selectColorSize}"
							@click="goAgreement()">《用户隐私协议》</text>
						及<text @click="goPrivacy()" :style="{color:selectColorSize}">《服务协议》</text></view>
				</view>
				<!-- 		<view class="code_login" @click="gologin">
			<image src="/static/login/code.png" mode="widthFix" class="code_icon"></image>
			密码登录
		</view> -->
			</view>

			<slider-verify :isShow="sliderVerifyFLag" @touchSliderResultSuccess="verifyResult"
				@touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
			<uni-popup ref="confirmDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
				<view class="store-view store-border-all tips-padding"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
					<text class="popup-title">提示</text>
					<text class="popup-subtitle">请阅读并同意用户隐私协议和服务协议!</text>
					<view class="tips-bottom">
						<view class="tips-button"
							:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
							@click="colfirmClose()">关闭</view>
						<view class="tips-button" :style="{background:kbuttonBgColor}" @click="confirmCheck()">确定勾选
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>


<script>
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js';
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				imageCaptchaUrl: '',
				imageCaptchaKey: '',
				imageCaptcha: '',
				selectColorSize: this.$store.state.selectColorSize, //字体
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				maxMobile: 11,
				mobile: '', // 用户手机号
				code: '', // 短信验证码
				user_wx_id: '', //授权id
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				btnb: 'btn btn-square btn-c btn-all', //按钮背景
				type: '', // 有值是第三方登录账号绑定
				isWeixinBrowser: this.$common.isWeiXinBrowser(),
				is_agree: false,
				sliderVerifyFLag: false,
				codewx: ''
				// tupian_code: '',
				// code_img: ''
			};
		},
		onLoad(option) {
			this.refreshImageCaptcha();
			this.mobile = option.mobile
			if (option.user_wx_id) {
				this.user_wx_id = option.user_wx_id;
				uni.setNavigationBarTitle({
					title: '绑定手机号'
				});
			}
		
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		computed: {

			// 验证手机号
			rightMobile() {
				let res = {};
				if (!this.mobile) {
					res.status = false;
					res.msg = '请输入手机号';
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false;
					res.msg = '手机号格式不正确';
				} else {
					res.status = true;
				}
				return res;
			},
			// 动态计算发送验证码按钮样式
			sendCodeBtn() {
				let btn = 'btn btn-g';
				if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
					return btn + ' btn-b';
				} else {
					return btn;
				}
			},
			// 动态更改登录按钮bg
			regButtonClass() {
				return this.mobile && this.mobile.length === this.maxMobile && this.code ? this.btnb + ' btn-b' : this
					.btnb;
			},
			logoImage() {
				return this.$store.state.config.shop_logo;
			}
		},
		onShow() {
			let _this = this;
			let userToken = _this.$db.get('userToken');
			if (userToken) {
				uni.switchTab({
					url: '/pages/index/index'
				});
				return true;
			}
			_this.timer = parseInt(_this.$db.get('timer'));
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown();
				_this.verification = false;
			}
		},
		methods: {
			refreshImageCaptcha() {
				this.$api.getImageCaptcha({
					type: 103
				}, res => { 
					this.imageCaptchaKey = res.data.key;
					this.imageCaptchaUrl = res.data.base64;
				})
				// this.imageCaptchaKey = Math.random();
				// this.imageCaptchaUrl = apiBaseUrl + '/passport/captcha/image?type=101&key=' + this.imageCaptchaKey;
			},
			// 关闭
			colfirmClose() {
				this.$refs.confirmDialog.close()
			},
			// 确定勾选
			confirmCheck() {
				this.is_agree = true
				this.$refs.confirmDialog.close()
			},

			// close: function() {
			// 	this.$refs.codebox.close()
			// },

			// get_img_code: function() {
			// 	this.$api.getImgCode({}, res => {
			// 		if (res.status) {
			// 			this.code_img = res.data.captcha_image
			// 			console.log(this.code_img)
			// 		}
			// 	})
			// },
			// 滑块验证结果回调函数
			verifyResult(res) {
				this.sliderVerifyFLag = false
				if (res) {
					this.sendCode()
				} else {

				}
			},
			send_before: function() {
				if (!this.rightMobile.status) {
					this.$common.errorToShow(this.rightMobile.msg);
				} else {
					this.$api.getImgCode({}, res => {
						if (res.status) {
							this.code_img = res.data.captcha_image
							this.$refs.codebox.open()
						}
					})
				}
			},
			refresh_code: function() {
				this.$api.getImgCode({}, res => {
					if (res.status) {
						this.code_img = res.data.captcha_image
					}
				})
			},
			agree: function() {
				this.is_agree = !this.is_agree
			},

			// 发送短信验证码
			sendCode() {
				if (!this.mobile) {
					this.$common.errorToShow("请输入手机号");
					return
				}
				if (!this.imageCaptcha) {
					this.$common.errorToShow("请输入图形验证码");
					return
				}
				this.$common.loadToShow('发送中...');
				setTimeout(() => {
					this.$common.loadToHide();
					this.$api.sms({
						phone: this.mobile,
						type: 103,
						imageCaptchaKey: this.imageCaptchaKey,
						imageCaptcha: this.imageCaptcha
					}, res => {
						if (res.status) {
							this.timer = 60;
							this.verification = false;
							this.$common.successToShow("发送成功");
							this.countDown(); // 执行验证码计时
							this.btnb = 'btn btn-square btn-all btn-b';
						} else {
							this.$common.errorToShow(res.message);
						}
					});
				}, 1000);
				// if (!this.rightMobile.status) {
				// 	this.$common.errorToShow(this.rightMobile.msg);
				// } else {
				// 	this.$common.loadToShow('发送中...');

				// 	setTimeout(() => {
				// 		this.$common.loadToHide();
				// 		this.$api.sms({
				// 			mobile: this.mobile,
				// 			code: 'login',
				// 			// captcha: this.tupian_code
				// 		}, res => {
				// 			if (res.status) {
				// 				this.timer = 60;
				// 				this.verification = false;
				// 				this.$common.successToShow(res.msg);
				// 				this.countDown(); // 执行验证码计时
				// 				// this.btnb = 'btn btn-square btn-all btn-b';
				// 			} else {
				// 				this.$common.errorToShow(res.msg);
				// 			}
				// 		});
				// 	}, 1000);
				// }
			},
			// 去注册
			toReg() {
				this.$common.redirectTo('/pages/login/register?mobile=' + this.mobile);
			},
			// 去注册
			gologin() {
				this.$common.redirectTo('/pages/login/login');
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
			// 登录
			login() {
				var _this = this;


				if (!this.is_agree) {
					this.$refs.confirmDialog.open()
					// this.$common.errorToShow('请阅读并同意用户隐私协议和服务协议!')
					return;
				}
				if (!this.code) return this.$common.errorToShow('请输入短信验证码');
			
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						 const {
							code
						} = event
						
						let data = {
							phone: _this.mobile,
							captcha: _this.code,
							code:code
						}
						_this.$api.signupwx(data, res => {
							if (res.status) {
								_this.$common.successToShow("登录成功");
								_this.$db.set('userToken', res.data.token);
							_this.$db.set('timer', 0);
							_this.$db.del('invitecode');
							uni.switchTab({
								url: '/pages/index/index'
							})
							
							} else {
								_this.$common.errorToShow(res.message);
							}
						})
					},
					fail: function(err) {
						_this.$common.errorToShow(err);

					}
				})




			},
			// 重定向跳转 或者返回上一个页面
			redirectHandler() {
				this.$common.successToShow('登录成功!', () => {
					this.$db.set('timer', 0);
					this.$db.del('invitecode');
					uni.switchTab({
						url: '/pages/index/index'
					})
				});
			},
			
			// 重定向跳转 或者返回上一个页面
			// 跳转到普通登录
			toLogin() {
				uni.navigateTo({
					url: '../../login/login/index'
				});
			},

			// 切换登录方式
			selectLoginType() {
				this.$common.redirectTo('./index1');
			},
		// 跳转到用户协议
		goAgreement() {
		//	window.location.href = "/static/html/service-agreement.html"
			// #ifdef H5
			console.log("---");
			window.location.href = "/static/html/service-agreement.html"
			// #endif
			// #ifdef APP-PLUS
			console.log("--1-");
			uni.navigateTo({
				url: '/pages/user/webview/webview?url=/static/html/service-agreement.html'
			})
			// #endif
			// let articleId = this.$store.state.config.user_agreement_id;
			// this.$common.navigateTo('/pages/article/index?id_type=1&id=' + 1);
		},
		// 跳转到隐私政策
		goPrivacy() {
			// #ifdef H5
		 	window.location.href = "/static/html/privacy-agreement.html"
			// #endif
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: '/pages/user/webview/webview?url=/static/html/privacy-agreement.html'
			})
			// #endif
		
			// let articleId = this.$store.state.config.privacy_policy_id;
			//	 this.$common.navigateTo('/pages/article/index?id_type=1&id=' + 2);
		},
			goForgetpwd() {
				this.$common.navigateTo('/pages/login/password');
			}
		}
	};
</script>

<style>
	@import '/pages/login/login.css';
</style>